<template>
    <div class="mpPosterSet">
      <div style="width: 40vw">
        <Form
          ref="formRef"
          :colLayout="colLayout"
          :labelWidth="labelWidth"
          v-model:formData="baseInfo"
          :formItems="formItems"
          :formDataRules="formDataRules"
        >
        </Form>
        <div>
          <span style="color: #f00">默认30天有效，没有特殊需求可以不用设置</span>
        </div>
        <div style="width: 40vw; margin-left: 150px">
          <!-- v-hasPermi="['api:mpManage:changePosterConfig']" -->
          <el-button
            @click="submit"
            type="success"
            icon="Top"
            size="small"
            v-hasPermi="['member:mpPosterSet:change']"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import {
    changePosterConfig,
    getPosterConfig,
  } from "@/api/platform/mpPosterSet";
  export default {
    name: "mpmpPosterset",
    data() {
      return {
        colLayout: {
          span: 24,
        },
        info: {},
        baseInfo: {},
        labelWidth: "160px",
        formDataRules: {
          code_mode: [{ required: true, message: "请选择" }],
          expire_seconds: [
            { required: true, message: "请输入", trigger: "blur" },
          ],
        },
        formItems: [
          {
            prop: "code_mode",
            label: "二维码类型",
            placeholder: "二维码类型",
            type: "radio",
            size: "small",
            border: true,
            disabled: false,
            change(value) {
              //radio 改变时触发
              console.log(111, value);
            },
            radioList: [
              {
                label: "长期",
                value: 2,
              },
              {
                label: "有效期",
                value: 1,
                size: "small",
              },
            ],
          },
          {
            prop: "expire_seconds",
            label: "二维码有效期",
            placeholder: "二维码有效期,单位秒",
            type: "input",
          },
        ],
      };
    },
    computed: {},
    created() {
      this.init();
    },
    mounted() {},
    methods: {
      init() {
        this.getInfo();
      },
      async getInfo() {
        const { data } = await getPosterConfig();
        if (data) {
          this.baseInfo = data;
        }
      },
      async submit() {
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            console.log(this.baseInfo);
            await changePosterConfig(this.baseInfo);
            this.$message.success("修改成功!");
          }
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .mpPosterSet {
    padding: 30px;
  }
  </style>
  